<template>
	<view class="box">
		<view class="top">
			<span @click='handleChange' :class="checked ==2?'off':'tongyi'">未执行</span>
			<span @click='handleChange1' :class="checked ==1?'open':'tongyi'">已完成</span>
			<view class="redPoint">
				{{total}}
			</view>
			<view class="redPoint1">
				{{total1}}
			</view>
		</view>
		<view class="middle">
			<uni-section title="基本用法" type="line">
				<uni-search-bar @confirm="search" :focus="true" v-model="searchValue">
				</uni-search-bar>
			</uni-section>
		</view>
		<view class="bottom">
			<view class="bottom-item" v-for="item of data.list1">
				<uni-card class="item" @click="handlePush(item.id)">
					<view style="" class="item-one">
						<image src="../../../static/svg/repair.png" mode="" style="height: 40rpx;width: 40rpx;"></image>
						{{item.title}}
					</view>
					<view>计划编号:{{item.num}}</view>
					<view>计划名称:{{item.name}}</view>
					<view class="">
						设备名称: <span style="color: lightgray;">{{item.equipmentName}}</span>
					</view>
					<view class="">
						维保类型: <span style="color: lightgray;">{{item.type}}</span>
					</view>
					<view class="">
						维护周期: <span style="color: lightgray;">{{item.create}}天</span>
					</view>
					<view style="color: red;">
						计划时间:{{item.createTime}} <span style="color: lightgray;">至</span> {{item.endTime}}
					</view>
				</uni-card>
			</view>

		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref
	} from "vue";
	const searchValue = ref('')
	const total = ref(1)
	const checked = ref(1)
	const total1 = ref(2)
	const goPush = () => {
		uni.navigateTo({
			url: '/pages/maintenance-management/maintenance-details/maintenance-details',
		})
	}
	const throttle = (fn, delay = 300) => {
		let timer = null

	}
	const handleChange = () => {
		checked.value = 1
	}
	const handleChange1 = () => {
		checked.value = 2
	}

	const handlePush = (item) => {
		console.log(item);
		uni.navigateTo({
			url: `/pages/maintenance-management/maintenance-details/maintenance-details?id=` +item
				
		})
	}
	const data = reactive({
		list1: [{
				id: 1,
				title: '该维保了！',
				num: 202001131210,
				name: '日常养护',
				equipmentName: '设备1',
				type: '日常自主保全',
				create: '1',
				person: '张三',
				createTime: '01-13 12:00',
				endTime: '01-14 13:00',
				text: '请维保人员务必记录清楚！'
			},
			{
				id: 2,
				title: '该维保了！',
				num: 202001131210,
				name: '日常养护',
				equipmentName: '设备1',
				type: '日常自主保全',
				create: '1',
				person: '张三',
				createTime: '01-13 12:00',
				endTime: '01-14 13:00',
				text: '请维保人员务必记录清楚！'
			},

		]
	})
</script>

<style lang="less" scoped>
	.box {
		background-color: whitesmoke;

		.top {
			height: 120rpx;
			margin-top: 20rpx;
			display: flex;
			background-color: whitesmoke;
			position: relative;

			.off {
				width: 50%;
				display: flex;
				align-items: center;
				justify-content: center;

			}

			.open {
				width: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.tongyi {
				width: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				border-bottom: 5px solid skyblue;
				box-sizing: border-box;
			}

			.redPoint {
				position: absolute;
				background-color: red;
				height: 30rpx;
				width: 30rpx;
				border-radius: 15rpx;
				left: 230rpx;
				top: 15rpx;
				color: white;
				text-align: center;
				line-height: 30rpx;
			}

			.redPoint1 {
				position: absolute;
				background-color: red;
				height: 30rpx;
				width: 30rpx;
				border-radius: 15rpx;
				right: 120rpx;
				top: 15rpx;
				color: white;
				line-height: 30rpx;
				text-align: center;
			}
		}

		.middle {}

		.bottom {
			margin-top: 10rpx;
			padding: 20rpx;

			.bottom-item {
				.item {
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					height: 400rpx;

					.item-one {
						font-size: 40rpx;
						font-weight: bold;
						display: flex;
						align-items: center;
					}
				}
			}
		}
	}
</style>